<script type="text/javascript">
    $(document).ready(function() {
        $("#continue-button").button();

        $("#continue-button").click(function() {
            var url = "<?php echo $this->baseUrl() ?>/user-tests/continue-test/?test_id=<? echo $this->test->getId() ?>&questionnaire_id=<? echo $this->questionnaire->getId() ?>";
            $.ajax({
                type: 'POST',
                url: url,
                data: $("#form-responses").serialize(),
                success: function(data) {
                    // data[0] = 'ok'/'fail'
                    // data[1] = url
                    // data[2] = $fail_responses
                    // data[3] = $ok_responses
                    if (data[0] == 'ok') {
                        document.location.href="<?php echo $this->baseUrl() ?>"+data[1];
                    } else {
                        if (data[4] == '1') {
                            document.location.href="<?php echo $this->baseUrl() ?>"+data[1];
                        } else {
                            var fails = data[2];
                            for(var i=0; i<fails.length;i++) {
                                $("#"+fails[i][0]).css('color', 'red');
                                $("#li_"+fails[i][0]).css('color', 'red');
                            }
                            var oks = data[3];
                            for(var i=0; i<oks.length;i++) {
                                $("#"+oks[i][0]).css('color', 'black');
                                $("#li_"+oks[i][0]).css('color', 'black');
                            }
                            $("#result-message").show();
                        }
                    }
                }
            });
        });
    });
</script>

<div id="section-content">
    <h2>Test: <? echo $this->test->getName(); ?> (<? echo $this->test->getLevelName(); ?>)</h2>


    <div id="questionnaire-list" class="ui-widget-header ui-corner-top">
        <ul id="test-questionnaires">
            <?php foreach($this->questionnaires as $q):  ?>

                <? if ($this->questionnaire->getId() == $q->getId()) { ?>
                    <li class="selected-questionnaire">
                <? } else { ?>
                    <li>
                <? } ?>
                    <? echo $q->getName(); ?>
                    &gt;
                </li>
            <? endforeach; ?>
                
        </ul>
        <div style="clear:both;"></div>
    </div>

    <div id="questions" class="ui-corner-bottom">
        <? if (count($this->questions) == 0) { ?>
            <p>There are no questions in this questionnaire!.</p>
        <? } else { ?>
        <form id="form-responses">
        <ol id="questions-list">
        <?php foreach($this->questions as $q):  ?>
            <li id="li_response_<? echo $q->getId(); ?>">
                <?
                $question = $q->getQuestion();
                $response_init = strpos($question, "{");
                $response_end = strpos($question, "}");

                if ($response_init >= 0 && $response_end > 0) {
                    $pre_question = substr($question, 0, $response_init);
                    $post_question = substr($question, $response_end + 1, strlen($question)-1);

                    $responses_str = substr($question, $response_init+1, $response_end-strlen($question));

                    $responses = explode("|", $responses_str);

                }

                ?>

                <? echo $pre_question; ?>
                <select id="response_<? echo $q->getId(); ?>" name="response_<? echo $q->getId(); ?>" class="responses">
                    <option value="-1">select...</option>
                <? foreach($responses as $re): ?>
                    <? $def_re = str_replace("*", "", $re); ?>
                    <option value="<? echo $def_re ?>"><? echo $def_re ?></option>
                <? endforeach; ?>
                </select>

                <? echo $post_question; ?>
                
            </li>
        <?php endforeach; ?>

        </ol>
        </form>
        <a id="continue-button" href="#">Continue ></a>
        
        <div id="result-message" class="ui-widget" style="margin-top: 20px; display: none;">
            <div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em;">
                <p>
                    <span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
                    <p>Incorrect responses are marked in <font color="red">red</font></p>
                </p>
            </div>

            
        </div>
        <? } ?>
    </div>
</div>